<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0学习笔记之路由（二）路由嵌套</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户中心</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    
    <script src="../vue/vue.js"></script>
<script src="../vue/vue-router.js"></script>
<script>
    // 定义组件
    var Home = {
        template:"<h3>主页内容</h3>"
    }
    var User = {
        template:`
            <div>
                <h3>用户中心</h3>
                <ul>
                    <li><router-link to="user/userinfo">查看个人信息</router-link></li>
                </ul>
                <div>
                    <router-view></router-view>
                </div>
            </div>

        `
    }
    var UserDetail = {
        template:"<h4>个人信息</h4>"
    }
    // 配置路由
    const routes = [
        { path:"/home", component:Home },
        {
            path:"/user",
            component:User,
            children:[  // 配置子路由
                { path:"userinfo",component:UserDetail }
            ]
        },
        { path:"*", redirect:"/home" } // 重定向让页面加载即显示Home
    ]
    // 生成路由实例
    const router = new VueRouter({
        routes
    })
    // 挂载到vue实例上
    new Vue({
        el:"#app",
        router
    })
</script>
</body>
</html>